fix: handle getStaticPaths fallback

I had errors with next build because of fallback. I need to return
early if the path does not exists, if not Next complains about
undefined variables.
I don't think it was related but I also fix the paths format in
getStaticPaths, I forgot the params object in some dynamic routes.

1 files changed, 7 insertions, 2 deletions

diff --git a/src/pages/sujet/[slug].tsx b/src/pages/sujet/[slug].tsx
index 3ccacbb..ca7d7cd 100644
--- a/src/pages/sujet/[slug].tsx
+++ b/src/pages/sujet/[slug].tsx
@@ -2,6 +2,7 @@ import { getLayout } from '@components/Layouts/Layout';
 import PostHeader from '@components/PostHeader/PostHeader';
 import PostPreview from '@components/PostPreview/PostPreview';
 import Sidebar from '@components/Sidebar/Sidebar';
+import Spinner from '@components/Spinner/Spinner';
 import { RelatedThematics, ToC, TopicsList } from '@components/Widgets';
 import { getAllTopicsSlug, getTopicBySlug } from '@services/graphql/queries';
 import styles from '@styles/pages/Page.module.scss';
@@ -9,6 +10,7 @@ import { NextPageWithLayout } from '@ts/types/app';
 import { ArticleMeta } from '@ts/types/articles';
 import { TopicProps, ThematicPreview } from '@ts/types/taxonomies';
 import { settings } from '@utils/config';
+import { getFormattedPaths } from '@utils/helpers/format';
 import { loadTranslation } from '@utils/helpers/i18n';
 import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next';
 import Head from 'next/head';
@@ -23,6 +25,8 @@ const Topic: NextPageWithLayout<TopicProps> = ({ topic }) => {
   const relatedThematics = useRef<ThematicPreview[]>([]);
   const router = useRouter();
 
+  if (router.isFallback) return <Spinner />;
+
   const updateRelatedThematics = (newThematics: ThematicPreview[]) => {
     newThematics.forEach((thematic) => {
       const thematicIndex = relatedThematics.current.findIndex(
@@ -182,10 +186,11 @@ export const getStaticProps: GetStaticProps = async (
 };
 
 export const getStaticPaths: GetStaticPaths = async () => {
-  const allSlugs = await getAllTopicsSlug();
+  const allTopics = await getAllTopicsSlug();
+  const paths = getFormattedPaths(allTopics);
 
   return {
-    paths: allSlugs.map((post) => `/sujet/${post.slug}`),
+    paths,
     fallback: true,
   };
 };